<template>
  <div class="baoxiaoall">
    <top></top>
    <div style="background: #fff;" v-loading="loading">
      <div style="padding: 20px;">
        <el-button type="danger" @click="logshow">新建销售渠道</el-button>
      </div>
      <div style="padding: 20px;">
        <el-table :data="list" border style="width: 100%">
          <el-table-column prop='channel_name' label="销售渠道名称"></el-table-column>
          <el-table-column prop='created_at' label="创建时间"></el-table-column>
          <el-table-column prop='source_amount' label="订单来源"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="logshow2(scope.row)">管理来源</el-button>
              <el-button type="text" @click="shanchuqudao(scope.row)">删除渠道</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog title="新建销售渠道" :visible.sync="log" width="600px" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-form ref="all" :model="all" label-width="80px" @submit.native.prevent>
          <el-form-item label="渠道名字">
            <el-input v-model="all.channel_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="add">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog :title="all2.title" :visible.sync="log2" width="1000px" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-table :data="list2" border style="width: 100%">
          <el-table-column prop='source_name' label="来源名称"></el-table-column>
          <el-table-column prop='created_at' label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="shanchulaiyuan(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-form ref="all" :model="all" inline label-width="80px" @submit.native.prevent style="margin-top: 20px;">
          <el-form-item label="来源名称:">
             <el-input v-model="all2.source_name"></el-input>
          </el-form-item>
          <el-button type="primary" @click="add2">添加</el-button>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="log2 = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import top from "./components/top.vue";
  export default {
    components: {
      top
    },
    name: "apilist",
    data() {
      return {
        all: {
          channel_name: "",
          id: ""
        },
        all2: {
          title: "",
          channel_id: "",
          source_name: "",
          id: ""
        },
        list: [],
        list2: [],
        total: 0,
        loading: false,
        log: false,
        log2: false,
        search: {
          page: 1,
          page_size: 20
        }
      }
    },
    created() {
      this.getlist()


    },
    mounted() {


    },
    methods: {
      shanchuqudao:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  axios.post('/api/form/channel/delete',{id:item.id})
                    .then(response => {
                      if (response.data.msg.code == 0) {
                        this.$message.success('已删除渠道！');
                        this.getlist()
                      } else {
                        this.$message.error(response.data.msg.info);
                      }
                    })
                })
      },
      shanchulaiyuan:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  axios.post('/api/form/source/delete',{id:item.id})
                    .then(response => {
                      if (response.data.msg.code == 0) {
                        this.$message.success('已删除来源！');
                        this.getlist2(this.all2.channel_id)
                      } else {
                        this.$message.error(response.data.msg.info);
                      }
                    })
                })
      },
      logshow: function() {
        this.all = {
          channel_name: "",
          id: ""
        }
        this.log = true
      },
      add: function() {
        axios.post('/api/form/channel/make', this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('保存成功');
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //获取列表
      getlist: function() {
        this.loading = true
        axios.get('/api/form/channels', this.search)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye: function(page) {
        this.page = page
        this.getlist()
      },
      logshow2: function(item) {

        this.all2 = {
          title: item.channel_name + '订单来源',
          channel_id: item.id,
          source_name: "",
          id: ""
        }
        this.getlist2(this.all2.channel_id)
        this.log2 = true
      },
      add2: function() {
        axios.post('/api/form/source/make', this.all2)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('保存成功');
              this.getlist2(this.all2.channel_id)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getlist2: function(channel_id) {
        axios.get('/api/form/sources?channel_id='+channel_id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list2 = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
    }
  }
</script>

<style scoped lang="scss">
  .baoxiaoall {
    background: #f2f2f2;
    min-height: 100vh;

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
